*{
    user-select: none;
    /* 无法选中，整体感更强 */
}

body{
    background: url("httpsimg1.imgtp.com20230216dRdOCJZB.jpg") no-repeat;
    background-size: cover;
    background-attachment: fixed;
}





.subject{
    position: absolute;
    top: 20%;
    margin-top: -15%;
    left: 50%;
    margin-left: -40%;
    /* absolute居中的一种方法 */
    background-color: rgb(248, 248, 248);
      filter:Alpha(Opacity=6);
    opacity: .80;
    width: 80%;
    height: 100%;
    border-radius: 25px;
    text-align: center;
    padding: 5px 40px;
    box-sizing: border-box;
    /* 这样padding就不会影响大小 */

}

.wifi{
  position: absolute;
  width: 70%;
  height: 35%;
  top: 230%;
  left: 1%;
  background-color:  #4d90fe;

border-radius: 80px;
}
.wa{
  position: absolute;
  top: 10%;
  left: 35%;
  color: #ffffff;
  text-decoration:none;
  
  font-weight: 600;
  
}

.title{
    font-size: 40px;
    font-weight: 600;
}



.set-brightness{
    position: absolute;

    width: 50%;
    height: 10%;
    bottom: 40%;
    
}
.span{    position: absolute;

    left: 138%;
    bottom: -1%;

}

.brightness{
    bottom: 25%;
}

svg{
    position: absolute;
    top:82%;
    width: 145%;
    left: 2%;
    height: 100%;
    border-radius: 3%;
    z-index: -1;
  }

.color1{
    position: absolute;
    width: 20%;
    height: 60%;
    left: 10%;
    top: 125%;
    background-color: #03ff29;
    border-radius: 23%;
    border:3px solid rgb(37, 35, 35);
}
.color2{
    position: absolute;
    width: 20%;
    height: 60%;
    left:50%;
    top: 125%;
    background-color: #f70606;
    border-radius: 23%;
    border:3px solid rgb(0, 0, 0);
}
.color3{
    position: absolute;
    width: 20%;
    height: 60%;
    left: 90%;
    top: 125%;
    background-color: #5d04d1;
    border-radius: 23%;
    border:3px solid rgb(0, 0, 0);
}
.p1{
    font-size: 20px;
    font-weight: 600;
    
    position: absolute;
    width: 20%;
    height: 70%;
    left: 12%;
    top: 165%;
    transition: all .3s;

}
.p2{
    font-size: 20px;
    font-weight: 600;
    
    position: absolute;
    width: 20%;
    height: 70%;
    left: 52%;
    top: 165%;
    transition: all .3s;
}
.p3{
    font-size: 20px;
    font-weight: 600;
    
    position: absolute;
    width: 20%;
    height: 70%;
    left: 92%;
    top: 165%;
    transition: all .3s;
}


.color0{
    position: absolute;
    width: 120%;
    height: 10%;
}




    
.now-pattern{
    width: 100%;
    height: 8%;
    position: absolute;
    bottom: 47%; 
}
.span-pattern{
    
    position: absolute;
    left: 29%;
    bottom: 18%; 
    font-size: 24px;
    font-weight: 600;
}
.passage1{
    
    position: absolute;
    text-align: left;
       font-size: 24px;
    font-weight: 600;
    width: 200%;
}



.passage{
    
    text-align: left;
       font-size: 24px;
    font-weight: 600;
}



/* input{
    background-color: whitesmoke;
    width: 90%;
    height: 12px;
    margin-bottom: 10px;
    border: none;
    border-bottom: 2px solid silver; */
    /* 下面的会覆盖上面的步伐 */
    /* outline: none;
    font-size: 22px;
} */
input[type="range"]{
    width: 135%;
    height: 10px;
    border: 0;
    top: 72%;
    background-color: #08010100;
    border-radius: 5px;
    position: relative;
    -webkit-appearance: none !important; 
    outline: none; 
background-size: 0% 100%;

}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ff6e6e;

}





.Mode{
    position: absolute;
    left: 0%;
    top: -43%;
    width: 100%; 
    height: 100%;
}
.select-pattern{
    position: absolute;
    height: 0px;

    
    bottom: 38%; 
    left: 10%;
       font-size: 24px;
    font-weight: 600;
}


but1 {
    text-decoration: none;
    position: absolute;
    left: 12%;
    top: 70%;
    /* 居中 */
    transform: translate(-10%, -50%);
    font-size: 16px;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    width: 32%;
    height: 6%;
    color: #fff;
    line-height: 40px;
    text-align: center;
    text-transform: uppercase;
    border-radius: 50px;
    z-index: 1;
    transition: all .6s;
  }

  but1::before {
    content: "";
    position: absolute;
    left: -1px;
    right: -1px;
    top: -1px;
    bottom: -1px;
    background: linear-gradient(90deg, #03a9f4, #03ff29, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 50px;
    filter: blur(20px);
    z-index: -1;
  }
  but1:hover::before {
    animation: sun 8s infinite;
  }


  @keyframes sun {
    100% {
        background-position: -400% 0;
    }
}

/* but2 */
but2 {
    text-decoration: none;
    position: absolute;
    left: 45%;
    top: 70%;
    /* 居中 */
    transform: translate(-10%, -50%);
    font-size: 16px;
    background: linear-gradient(90deg, #00fa2a, #d905f0, #ff5151, #fe0000);
    background-size: 400%;
    width: 20%;
    height: 6%;
    color: #fff;
    line-height: 40px;
    text-align: center;
    text-transform: uppercase;
    border-radius: 50px;
    z-index: 1;
    transition: all .6s;
  }

  but2::before {
    content: "";
    position: absolute;
    left: -1px;
    right: -1px;
    top: -1px;
    bottom: -1px;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 50px;
    filter: blur(20px);
    z-index: -1;
  }

  but2:hover::before {
    animation: sun 8s infinite;
  }
  @keyframes sun {
    100% {
      background-position: -400% 0;
    }
  }

  /* but3 */


  but3 {
    text-decoration: none;
    position: absolute;
    left: 69%;
    top: 70%;
    /* 居中 */
    transform: translate(-10%, -50%);
    font-size: 16px;
    background: linear-gradient(90deg, #fe3333, #07ff83f6, #ffe101, #03a9f4);
    background-size: 400%;
    width: 20%;
    height: 6%;
    color: #fff;
    line-height: 40px;
    text-align: center;
    text-transform: uppercase;
    border-radius: 50px;
    z-index: 1;
    transition: all .6s;
  }

  but3::before {
    content: "";
    position: absolute;
    left: -1px;
    right: -1px;
    top: -1px;
    bottom: -1px;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 50px;
    filter: blur(20px);
    z-index: -1;
    transition: all .3s;
  }

  but3:hover::before {
    animation: sun 8s infinite;
  }
  @keyframes sun {
    100% {
      background-position: -400% 0;
    }
  }

  /* but4 */

  
  but4 {
    text-decoration: none;
    position: absolute;
    left: 13%;
    top: 78%;
    /* 居中 */
    transform: translate(-10%, -50%);
    font-size: 16px;
    background: linear-gradient(90deg, #ff0000, #adff08f6, #ffe101, #f40303);
    background-size: 400%;
    width: 15%;
    height: 6%;
    color: #fff;
    line-height: 40px;
    text-align: center;
    text-transform: uppercase;
    border-radius: 50px;
    z-index: 1;
    transition: all .6s;
  }

  but4::before {
    content: "";
    position: absolute;
    left: -1px;
    right: -1px;
    top: -1px;
    bottom: -1px;
    background: linear-gradient(90deg, #f4d003, #ff0404, #ffeb3b, #ffaa00);
    background-size: 400%;
    border-radius: 50px;
    filter: blur(20px);
    z-index: -1;
  }

  but4:hover::before {
    animation: sun 8s infinite;
  }
  @keyframes sun {
    100% {
      background-position: -400% 0;
    }
  }

  /* but5 */
  
  but5 {
    text-decoration: none;
    position: absolute;
    left: 33%;
    top: 78%;
    /* 居中 */
    transform: translate(-10%, -50%);
    font-size: 16px;
    background: linear-gradient(90deg, #229d8f, #1d7d4df6, #139094, #03a9f4);
    background-size: 400%;
    width: 35%;
    height: 6%;
    color: #fff;
    line-height: 40px;
    text-align: center;
    text-transform: uppercase;
    border-radius: 50px;
    z-index: 1;
    transition: all .6s;
  }

  but5::before {
    content: "";
    position: absolute;
    left: -1px;
    right: -1px;
    top: -1px;
    bottom: -1px;
    background: linear-gradient(90deg, #1525ff, #163394ba, #ffe608, #03a9f4);
    background-size: 400%;
    border-radius: 50px;
    filter: blur(20px);
    z-index: -1;
  }

  but5:hover::before {
    animation: sun 8s infinite;
  }
  @keyframes sun {
    100% {
      background-position: -400% 0;
    }
  }

  /* but6 */
  
  but6 {
    text-decoration: none;
    position: absolute;
    left: 68%;
    top: 78%;
    /* 居中 */
    transform: translate(-10%, -50%);
    font-size: 16px;
    background: linear-gradient(90deg, #db5fc0, #07ff83f6, #ffe101, #03a9f4);
    background-size: 400%;
    width: 23%;
    height: 6%;
    color: #ffffff;
    line-height: 40px;
    text-align: center;
    text-transform: uppercase;
    border-radius: 50px;
    z-index: 1;
    transition: all .6s;
  }

  but6::before {
    content: "";
    position: absolute;
    left: -1px;
    right: -1px;
    top: -1px;
    bottom: -1px;
    background: linear-gradient(90deg, #03a9f4, #fce2ff, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 50px;
    filter: blur(20px);
    z-index: -1; 
  }

  but6:hover::before {
    animation: sun 8s infinite;
  }
  @keyframes sun {
    100% {
      background-position: -400% 0;
    }
}


  /* but7 */
  
  but7 {
    text-decoration: none;
    position: absolute;
    left: 11%;
    top: 86%;
    /* 居中 */
    transform: translate(-10%, -50%);
    font-size: 16px;
    background: linear-gradient(90deg, #59cf4a, #07ff83f6, #ffe101, #f40303);
    background-size: 400%;
    width: 24%;
    height: 6%;
    color: #fff;
    line-height: 40px;
    text-align: center;
    text-transform: uppercase;
    border-radius: 50px;
    z-index: 1;
    transition: all .6s;
  }

  but7::before {
    content: "";
    position: absolute;
    left: -1px;
    right: -1px;
    top: -1px;
    bottom: -1px;
    background: linear-gradient(90deg, #04fdd8, #ff0000, #ffeb3b, #03a8f45d);
    background-size: 400%;
    border-radius: 50px;
    filter: blur(20px);
    z-index: -1;
  }

  but7:hover::before {
    animation: sun 8s infinite;
  }
  @keyframes sun {
    100% {
      background-position: -400% 0;
    }
  }


  /* but8 */
  
  but8 {
    text-decoration: none;
    position: absolute;
    left: 40%;
    top: 86%;
    /* 居中 */
    transform: translate(-10%, -50%);
    font-size: 16px;
    background: linear-gradient(90deg, #9900ff, #07ff83f6, #ffe101, #03a9f4);
    background-size: 400%;
    width: 50%;
    height: 6%;
    color: #fff;
    line-height: 40px;
    text-align: center;
    text-transform: uppercase;
    border-radius: 50px;
    z-index: 1;
    transition: all .6s;
  }

  but8::before {
    content: "";
    position: absolute;
    left: -1px;
    right: -1px;
    top: -1px;
    bottom: -1px;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 50px;
    filter: blur(20px);
    z-index: -1;
  }

  but8:hover::before {
    animation: sun 8s infinite;
  }
  @keyframes sun {
    100% {
      background-position: -400% 0;
    }
  }



  
.line {
    position: absolute;
    bottom:0% ;
    left:25%;
    /* 线的长宽 */
    height: 3px;
    width: 50%;
    background-color: #54a0ff;
    transition: all .3s;
  }
  
  .select-line{
    position: absolute;
    bottom:1% ;
    left: 58%;
    /* 线的长宽 */
    height: 8px;
    width: 15%;
    background-color: #ff6201;
    transition: all .3s;
    border-radius: 50%;
  }
  
  .slipNav
  {
    position: absolute;
    bottom: 2% ;
    height: 10%;
    width: 100%;
    left:0%;
  }
  
  .main_page{
    position: absolute;
    bottom: 5% ;
    width: 10%;
    left:31%;
  }
  .else_page{
    position: absolute;
    bottom: 5% ;
    width: 10%;
    left:60%;
  }